<template>
  <el-main>
    <div class="bigShow">
      <IssueHeader @info="getInfo" />
      <el-scrollbar max-height="400px" v-loading="loading">
        <!--上面为工单部分头部-->
        <!--下面为展示工单概述的部分-->
        <div class="showissue">
          <!-- eslint-disable-next-line -->
          <div v-for="issue in issues">
            <div class="eachissue">
              <el-card class="issuecard" shadow="never">
                <div class="name" style="font-weight: 700; display: inline">
                  标题:{{ issue.name }}
                </div>
                <div>
                  <el-popover
                    v-if="username == issue.creatorName"
                    placement="left"
                    :width="400"
                    trigger="click"
                    teleported
                  >
                    <template #reference>
                      <el-tag
                        v-if="issue.money != 0"
                        class="ml-2 icon"
                        type="warning"
                        effect="dark"
                        @click="checkreward(issue)"
                        style="
                          left: 77%;
                          top: -26px;
                          position: relative;
                          cursor: pointer;
                        "
                        >验收悬赏</el-tag
                      >
                    </template>
                    <template #default>
                      <div>
                        <div style="margin-bottom: 10px">
                          对完成您悬赏的侠义之士表示感谢吧:
                        </div>
                        <!-- eslint-disable-next-line -->
                        <!-- <div v-for="finish in finishusers">
                          <el-card
                            shadow="hover"
                            style="cursor: pointer; width: 60%; background-color;"
                          >
                            {{ finish }}
                          </el-card>
                        </div> -->
                        <el-select
                          placeholder="请选择"
                          :popperAppendToBody="false"
                          v-model="finishuser"
                          class="selecttusername"
                          size="large"
                          style="width: 300px; margin-bottom: 10px"
                          @change="checkfinishman(issue)"
                        >
                          <el-option
                            :popperAppendToBody="false"
                            v-for="item in finishusers"
                            :key="item"
                            :label="item"
                            :value="item"
                            >{{ item }}</el-option
                          >
                        </el-select>
                        <div class="message2">请注意!一旦确认之后无法更改</div>
                      </div>
                    </template>
                  </el-popover>
                  <el-popover
                    v-else
                    placement="left"
                    :width="400"
                    trigger="click"
                  >
                    <template #reference>
                      <el-tag
                        v-if="issue.money != 0"
                        class="ml-2 icon"
                        type="warning"
                        effect="dark"
                        @click="getreward(issue)"
                        style="
                          left: 77%;
                          top: -26px;
                          position: relative;
                          cursor: pointer;
                        "
                        >完成悬赏</el-tag
                      >
                    </template>
                    <div style="font-size: 17px; margin-bottom: 10px">
                      请输入您的完成成果
                    </div>
                    <div style="margin-bottom: 5px">仓库名:</div>
                    <div>
                      <el-input v-model="finishhousename"></el-input>
                    </div>
                    <div style="margin-bottom: 5px">版本号:</div>
                    <div>
                      <el-input v-model="finishversion"></el-input>
                    </div>
                    <div style="display: flex; justify-content: center">
                      <el-button
                        type="success"
                        @click="finishissue(issue)"
                        style="margin-top: 20px"
                        >提交</el-button
                      >
                    </div>
                  </el-popover>

                  <el-tag
                    class="ml-2 icon"
                    type="info"
                    @click="editissue(issue)"
                    style="
                      left: 78%;
                      top: -25px;
                      position: relative;
                      cursor: pointer;
                    "
                    ><el-icon><EditPen /></el-icon
                  ></el-tag>
                  <el-tag
                    class="ml-2 icon"
                    type="info"
                    @click="viewissue(issue)"
                    style="
                      left: 79%;
                      top: -25px;
                      position: relative;
                      cursor: pointer;
                    "
                    ><el-icon><View /></el-icon
                  ></el-tag>

                  <el-popconfirm
                    title="确认删除?"
                    confirm-button-text="Yes"
                    cancel-button-text="No"
                    @confirm="deleteIssue(issue)"
                  >
                    <template #reference>
                      <el-tag
                        class="ml-2 icon"
                        type="info"
                        v-if="userType == 1"
                        style="
                          left: 80%;
                          top: -25px;
                          position: relative;
                          cursor: pointer;
                        "
                        ><el-icon><Close /></el-icon
                      ></el-tag>
                    </template>
                  </el-popconfirm>
                </div>

                <div class="information">
                  <span class="creatorstate">
                    <div class="creator">
                      <el-icon style="top: 5px; color: darkorange" size="large"
                        ><UserFilled
                      /></el-icon>
                      <el-tag size="large">{{ issue.creatorName }}</el-tag>
                    </div>
                    <div class="state">
                      <el-icon style="top: 5px; color: crimson" size="large"
                        ><InfoFilled
                      /></el-icon>
                      <!--状态不存在1-->
                      <el-tag
                        size="large"
                        class="ml-2"
                        type="success"
                        v-if="issue.state == 1"
                        >无状态</el-tag
                      >
                      <el-tag
                        size="large"
                        class="ml-2"
                        type="success"
                        v-if="issue.state == 2"
                        >代办的</el-tag
                      >
                      <el-tag
                        size="large"
                        class="ml-2"
                        type="success"
                        v-if="issue.state == 3"
                        >进行中</el-tag
                      >
                      <el-tag
                        size="large"
                        class="ml-2"
                        type="success"
                        v-if="issue.state == 4"
                        >已完成</el-tag
                      >
                      <el-tag
                        size="large"
                        class="ml-2"
                        type="success"
                        v-if="issue.state == 5"
                        >已拒绝</el-tag
                      >
                    </div>
                    <div v-if="issue.money != 0">
                      <el-icon
                        style="top: 5px; color: cornflowerblue"
                        size="large"
                        ><Coin
                      /></el-icon>
                      <el-tag
                        size="large"
                        class="ml-2"
                        type="warning"
                        effect="dark"
                        >{{ issue.money }}</el-tag
                      >
                    </div>
                  </span>
                  <span class="updatetime"
                    ><el-icon style="top: 3px; color: blue" size="large"
                      ><Timer
                    /></el-icon>
                    <span style="margin-top: 5px">
                      最新更新时间 {{ issue.updateTime }}</span
                    ></span
                  >
                </div>
              </el-card>
            </div>
          </div>
          <el-empty
            description="还没有工单哦"
            v-if="empty == true"
            :image-size="190"
          />
        </div>
      </el-scrollbar>
    </div>
  </el-main>
  <!-- eslint-disable-next-line -->
  <el-aside><HistoryRecoed /> </el-aside>
</template>

<script>
import { ElMessage } from "element-plus";
import IssueHeader from "./IssueHeader.vue";
import HistoryRecord from "../HistoryRecord.vue";
import request from "@/utils/request";
export default {
  name: "ShowIssue",
  components: {
    IssueHeader,
    HistoryRecord,
  },
  data() {
    return {
      finishuser: "",
      finishusers: [],
      finishhousename: "",
      finishversion: "",
      getrewardvisible: true,
      username: sessionStorage.getItem("username"),
      empty: false,
      loading: true,
      total: 10,
      currentPage: 1,
      state: 1,
      priority: 1,
      //用户的类别
      userType: 1,
      issues: [],
    };
  },
  mounted() {
    this.userType = window.sessionStorage.getItem("userType");
    //获取所有的工单
    this.getallissue();
  },
  methods: {
    getallissue() {
      request
        .post(
          `/issue/getAllIssues?username=${this.$route.params.username}&housename=${this.$route.params.housename}&state=${this.state}&priority=${this.priority}`
        )
        .then((res) => {
          this.issues = res.data;
          if (this.issues == null || this.issues == "") {
            this.empty = true;
          }
          this.loading = false;
          console.log(res);
        });
    },
    getoption(item) {
      this.finishuser = item;
      this.optionShow = false;
    },
    open() {
      this.optionShow = !this.optionShow;
    },
    checkfinishman(issue) {
      request
        .post(
          "/issue/owenerreward?huntername=" +
            this.finishuser +
            "&issueId=" +
            issue.id
        )
        .then((res) => {
          this.getallissue();
          this.finishusers = [];
          if (res.code == 200) {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "success",
            });
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
    },
    finishissue(issue) {
      request
        .get(
          "/issue/xsnotice?ownnername=" +
            sessionStorage.getItem("username") +
            "&housename=" +
            this.finishhousename +
            "&version=" +
            this.finishversion +
            "&issueId=" +
            issue.id
        )
        .then((res) => {
          if (res.code == 200) {
            ElMessage({
              showClose: true,
              message: "提交成功!",
              type: "success",
            });
          } else {
            ElMessage({
              showClose: true,
              message: "提交失败!",
              type: "error",
            });
          }
        });
    },
    checkreward(issue) {
      this.finishusers = [];
      request.get(`/issue/viewIssuemember?id=${issue.id}`).then((res) => {
        if (res.code == 200) {
          console.log(res);
          for (let i in res.data) {
            this.finishusers.push(res.data[i]);
          }
        } else {
          console.log("获得查看负责人失败");
        }
      });
    },
    getreward() {
      this.getrewardvisible = true;
    },
    getInfo(stateinfo, priorityinfo) {
      this.loading = true;
      this.state = stateinfo;
      this.priority = priorityinfo;
      request
        .post(
          `/issue/getAllIssues?username=${this.$route.params.username}&housename=${this.$route.params.housename}&state=${this.state}&priority=${this.priority}`
        )
        .then((res) => {
          this.issues = res.data;
          console.log(res);
        });
      this.loading = false;
    },
    handleCurrentChange(val) {
      console.log("currentPage: " + val);
      this.currentPage = val;
      this.$refs.IssueHeader.load();
    },
    editissue(issue) {
      console.log("访问工单" + issue.name);
      this.$router.push("editissue/" + issue.id);
    },
    viewissue(issue) {
      console.log("访问工单" + issue.name);
      this.$router.push("viewissue/" + issue.id);
    },
    deleteIssue(e) {
      this.loading = true;
      request.delete(`/issue/deleteIssue?issueId=${e.id}`).then((res) => {
        if (res.code == 200) {
        } else {
          console.log("删除工单失败");
        }
      });
      this.getallissue();
      this.loading = false;
    },
  },
};
</script>

<style scoped>
.bigShow {
  margin-left: 300px;
}
.selectstatespan {
  font-size: large;
  color: gray;
}
.showissue {
  margin-top: 10px;
}
.information {
  justify-content: space-between;
  display: flex;
}
.name {
  margin: 0;
}
.creatorstate {
  margin-top: 20px;
  justify-content: space-between;
  display: flex;
  width: 300px;
}
.newissue {
  margin-bottom: 0;
}
.creator {
  justify-content: space-between;
  display: flex;
  font-size: small;
}
.state {
  justify-content: space-between;
  display: flex;
  font-size: small;
}
.Label {
  display: flex;
}
.updatetime {
  justify-content: space-between;
  display: flex;
  font-size: small;
  margin-top: 20px;
}
.showpager {
  margin-top: 10px;
  justify-content: center;
  display: flex;
}
.issuecard {
  width: 99%;
  height: 20%;
}
.icon:hover {
  color: red;
}
.message2 {
  width: 255px;
  -webkit-text-size-adjust: 80%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  box-sizing: inherit;
  position: relative;
  min-height: 1em;
  margin: 1em 0em;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  font-size: 1em;
  border-radius: 4px;
  border: 1px solid #e3e9ed;
  background: #fff;
  margin-top: 0em;
  background-color: #fff8db;
  color: #b58105;
  box-shadow: 0px 0px 0px 1px #b58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
</style>
